<template>
  <div>
    <div class="audioMain">
      <div :class="{audioAnime1:isAnime}"></div>
      <div :class="{audioAnime2:isAnime}"></div>
      <div class="audio" :style="audioStyle" @touchstart="audioStart" @touchend="audioEnd"></div>
    </div>
    <transition name="popupBounce">
      <div class="audioPop" v-if="audioPopShow">
        <div class="amplitude" v-for="(count,index) in algorithm" :key="index" :style="amplitudeStyle(index,count)">
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: ["withText"],
  data() {
    return {
      count: 0,
      isAnime: false,
      articleNumber: 0,
      mediaRecordFeature: null,
      audioPopShow: false,
      amplitude: 0,
      algorithm: [0.1, 0.25, 0.4],
      timer: null
    }
  },
  computed: {
    audioStyle() {
      const scale = this.isAnime ? 0.9 : 1
      return {
        transform: "scale(" + scale + ")"
      }
    },
    amplitudeStyle(index, count) {
      return function (index, count) {
        const width = 0.8 + (index + 1) * 0.5,
          top = 3.5 - 0.8 * index,
          color = this.amplitude > count ? "rgb(255, 186, 111)" : "rgb(240, 240, 240)",
          shadow = color === "rgb(240, 240, 240)" ? "inset 1px 1px 1px rgba(0, 0, 0, 0.2)" : ""
        return {
          width: width + "rem",
          top: top + "rem",
          background: color,
          boxShadow: shadow
        }
      }
    }
  },
  methods: {
    audioStart: function () {
      this.$emit("audioStart")
      this.mediaRecord()
      this.clickMusic()
      this.isAnime = true
      this.audioPopShow = true
    },
    audioEnd: function () {
      this.isAnime = false
      this.audioPopShow = false
      clearInterval(this.timer)
      setTimeout(() => {
        //上传oss
        MediaRecordFeature.upload({
          'filePath': this.mediaRecordFeature.getFilePath(),
          'onSuccess': async (fileUrl) => {
            // fileUrl 即为 OSS 上的公网访问地址
            const json = {
              audioUrl: fileUrl,
              text: this.withText
            }
            const [date, err] = await this.awaitWarp(this.$post(this.api.audioWithText, json))
            date.isAudioWithText ? this.$emit("audioWithSuc") : this.$emit("audioWithFail")
          }
        })
      }, 1000)
    },
    //录音对象
    mediaRecord: function () {
      this.mediaRecordFeature = new MediaRecordFeature({
        'filePath': undefined, // 当 filePath 为空时，即为创建新的录音文件；否则，即修改旧的录音文件
        'onPlayStopped': function () { } // 当播放结束时，触发
      })
      this.mediaRecordFeature.ready({
        'onSuccess': () => {
          // 在此回调之后，才能调用下述方法
          this.mediaRecordFeature.startRecord()
          this.timer = setInterval(() => {
            this.mediaRecordFeature.getCurrentAmplitude({
              onSuccess: (amplitude) => {
                // amplitude 介于 0~1 之间
                this.amplitude = amplitude
              }
            })
          }, 200)
        },
        'onError': function () {
          alert('未知错误')
        }
      })
    },
    audioAnimate: function () {
      this.isAnime = true
      setTimeout(() => { this.isAnime = false }, 4800)
    }
  }
}        
</script>

<style scoped lang='stylus'>
.audioMain
  $coord('WHRB', 3.5rem, 3.5rem, 1.5rem, 1.5rem)
  transform translate3d(var(--X), var(--Y), 0)
  z-index 99
  .audio
    transition all 0.3s
    position absolute
    width 100%
    height 100%
    background url($urlTitle + 'assignment/录音按钮.png') 0 0 / 100% 100%
  .audioAnime1
    position absolute
    width 100%
    height 100%
    border 1rem solid rgb(251, 185, 105)
    box-sizing border-box
    border-radius 50%
    animation anime1 0.6s infinite
  .audioAnime2
    position absolute
    width 100%
    height 100%
    border 1rem solid rgb(255, 241, 229)
    box-sizing border-box
    border-radius 50%
    animation anime2 1.2s infinite
    box-shadow 0px 0px 0.5rem rgb(251, 185, 105)
.audioPop
  position absolute
  $center('WHLT', 10rem, 7rem)
  background url($urlTitle + 'assignment/录音背景.png') 0 0 / 100% 100%
  .amplitude
    $coord('WHLT', 1.1rem, 0.45rem, 5.5rem, 3.3rem)
    background rgb(240, 240, 240)
    border-radius 0.5rem
    box-shadow inset 1px 1px 1px rgba(0, 0, 0, 0.2)
    transition all 0.3s
@keyframes anime1
  0%
    transform scale(1)
    opacity 1
  50%
    transform scale(1.1)
    opacity 0.8
  100%
    transform scale(1.1)
    opacity 0.1
@keyframes anime2
  0%
    transform scale(1)
    opacity 1
  50%
    transform scale(1.2)
    opacity 0.8
  100%
    transform scale(1.2)
    opacity 0
</style>